<template>
	<div class="container" @click="HideGallary">
      <div class="wrapper">
        <swiper :options="swiperOption" ref="mySwiper">
    		  <swiper-slide v-for="(item,index) of imgs" :key="index"><img :src="item" class="swiper-img" :key="index" /></swiper-slide>		   
    			<div class="swiper-pagination" slot="pagination"></div>			
    			<div class="swiper-scrollbar" slot="scrollbar"></div>
  		  </swiper>
      </div>
	</div>
</template>
<script>
export default {
  name: 'CommonGallary', 
  props:{
    imgs:{
    	type:Array,
    	default (){return[]}
    }
  },
  data () {
      return {
        //imgs:[
        //'http://img1.qunarzz.com/sight/source/1510/6e/1ea71e2f04e.jpg_r_640x214_aa6f091d.jpg',
      	//'http://img1.qunarzz.com/sight/source/1505/aa/7baaf8a851d221.jpg_r_640x214_1431200f.jpg',
      	//'http://img1.qunarzz.com/sight/source/1505/ce/bc89bc2f0e33ea.jpg_r_640x214_3e408453.jpg'],
        swiperOption: {
            pagination:'.swiper-pagination',        
            paginationType: 'fraction',
            observeParents: true,
            observer: true,
            loop:true
        }
      }
  },
   methods:{
    HideGallary(){
      this.$emit('ClickHide')  
    }
  }
}
</script>
<style lang="stylus" scoped>
.wrapper >>> .swiper-container
   overflow:inherit
 .container
   display:flex
   flex-direction:column
   justify-content:center
   background:#000
   height:30px;
   position:fixed
   left:0
   top:0
   bottom:0
   width:100%
   z-index:9999
   height:100%
   .wrapper
     background:#fff    
     width:100%
     .swiper-img
       width:100%
     .swiper-pagination
       color:#fff
       bottom:-1rem
</style>